<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title" style="line-height: 40px;float: left;">
            评审项目信息
          </h3>
        </div>
        <div class="box-body">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="review_id" label="ID" width="80">
            </el-table-column>
            <el-table-column prop="title" label="项目名称"> </el-table-column>
            <el-table-column prop="name" label="申请人"> </el-table-column>
            <el-table-column prop="jobrank" label="职务级别"> </el-table-column>
            <el-table-column prop="sch" label="所在单位" :formatter="showName">
            </el-table-column>
            <el-table-column prop="status" label="评审状态">
              <template scope="scope">
                <!-- <el-tag type="warning" v-if="scope.row.status == 0" close-transition>正在审核</el-tag> -->
                <el-tag
                  v-if="scope.row.status == 1 || scope.row.status == null"
                  type="warning"
                  close-transition
                  width="80"
                  >待评审</el-tag
                >
                <el-tag
                  type="success"
                  v-if="scope.row.status == 2"
                  close-transition
                  >已评审</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="check(scope.row)"
                  type="primary"
                  size="small"
                  style="background: #367fa9;"
                  :disabled="scope.row.status == 2"
                  >评审</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  style="background: rgb(16, 168, 24);"
                  @click="detail(scope.row)"
                  >材料详情</el-button
                >
                <!-- <el-button type="primary" size="small">材料详情</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            title="欢迎进入此项目评审"
            :visible.sync="dialogFormVisible"
            width="30%"
            center
          >
            <el-form ref="form" :model="form"  class="form_demo" >
              <p>选题(主要考察选题的学术价值或应用价值)</p>
              <el-form-item label="专家评分">
                <el-input
                  v-model="form.score1"
                  placeholder="可选填"
                  style="width: 182px;"
                ></el-input>
              </el-form-item>
              <p>
                论证(主要考察研究内容、基本观点、研究思路、研究方法、创新之处)
              </p>
              <el-form-item label="专家评分">
                <el-input
                  v-model="form.score2"
                  placeholder="可选填"
                  style="width: 182px;"
                ></el-input>
              </el-form-item>
              <span></span>
              <p>
                研究基础(主要考察课题负责人的学术或技术条件、经费概算及主要参考文献)
              </p>
              <el-form-item label="专家评分">
                <el-input
                  v-model="form.score3"
                  placeholder="可选填"
                  style="width: 182px;"
                ></el-input>
              </el-form-item>
              <el-form-item label="综合评价">
                <el-input
                  v-model="form.evaluate"
                  style="width: 182px;"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="备注">
                <el-input
                  v-model="form.remark"
                  style="width: 182px;"
                ></el-input>
              </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="onSubmit(form)">确定</el-button>
            </div>
          </el-dialog>
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              layout="prev, pager, next"
              :page-count="total"
              style="float: right;"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import http from './../../../../assets/js/http.js'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      userInfo: Lockr.get('userInfo'),
      currentPage: 1,
      total: 1,
      dialogFormVisible: false,
      form: {
        score1: '',
        score2: '',
        score3: '',
        evaluate: '',
        remark: ''
      },
      tips: {
        evaluateTips: '[综合评价]'
      },
      row_id: '',
      expert_id: '',
      subproject_id: ''
    }
  },
  methods: {
    showName(row) {
      return Lockr.get('schInfo')['sch_id_' + row.sch]['sch_name']
    },
    // 点击页码获得对应页码的列表
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      let data = {
        page: this.currentPage
      }
      this.getTableData(data)
    },
    // 获得数据
    getTableData() {
      this.loading = true
      let data = {
        id: this.userInfo.id
      }
      this.apiPost('admin/Report/endExpertReview', data).then(res => {
        this.handelResponse(res, data => {
          console.log(res.data.data)
          this.tableData = res.data.data
          // res.data.data.forEach(element => {
          //   element["sch_"] = element.sch;
          //   element["sch"] = Lockr.get("schInfo")["sch_id_" + element.sch]["sch_name"]
          // })
          this.total = Math.ceil(data.total / data.per_page)
          this.loading = false
        })
      })
    },
    check(row) {
      this.dialogFormVisible = true
      this.form = {}
      this.row_id = row.review_id
      this.expert_id = row.expert_id
      this.subproject_id = row.subproject_id
    },
    // 跳转项目详情界面
    detail(row) {
      console.log(row.id)
      // router.push({ name: 'middetailpro', params: { id: row.id }})
    },
    onSubmit(form) {
      var checkResult = this.checkList(this.form, [
        {
          name: 'evaluate',
          reg: ['notnull']
        }
      ])
      
      if (_g.j2s(checkResult) === '{}') {
        let data = {
          user_id: this.userInfo.id,
          id: this.row_id,
          subproject_id: this.subproject_id,
          expert_id: this.expert_id,
          score1: this.form.score1,
          score2: this.form.score2,
          score3: this.form.score3,
          evaluate: this.form.evaluate,
          remark: this.form.remark
        }
        console.log(data)
        this.apiPost('admin/Report/endExpertWrite', data).then(res => {
          this.handelResponse(res, data => {
            _g.toastMsg('success', res.data)
            this.dialogFormVisible = false
            this.getTableData()
          })
        })
      } else {
        for (const key in checkResult) {
          _g.toastMsg('error', this.tips[key] + checkResult[key])
          break
        }
      }
    }
  },
  created() {
    _g.closeGlobalLoading();
    this.getTableData();
  },
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.form_demo {
  margin: 20px;
}
</style>
